<template>
	<view class="container">
		<view v-if="!isShow2">
			<view class="first">
				<view class="first-1">请选择注销原因</view>
				<view class="u-page__radio-item">
					<u-radio-group size="38" activeColor="#FCC928" v-model="radiovalue7" :borderBottom="true"
						placement="column" iconPlacement="right">
						<u-radio iconSize="0" labelSize="28" labelColor="#000" v-for="(item, index) in radiolist7"
							:key="index" :customStyle="{marginBottom: '16px','border':index==3?'none':''}"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="btn" @click="handleClick">
				<image src="https://images.linglinggong.net/FusvxoOuz5Wzu0kgsfQt-mSGnsM0" mode="aspectFill"></image>
			</view>
		</view>
		<view v-if="isShow2">
			<view class="top1">
				<image src="https://images.linglinggong.net/Fn_D7qlqhhUv2csAWCh3JoXUyVk0" mode="aspectFit"></image>
			</view>
			<view class="top2">
				<image src="https://images.linglinggong.net/FuwDEjoM4P1cq9Yu1YjZ2TbjRT9h" mode="aspectFit"></image>
			</view>
			<view class="btn2" @click="handleClick2">
				<image src="https://images.linglinggong.net/FvuCjfEC9URhOgDwLgeLweZ-GbDW" mode="aspectFill"></image>
			</view>
		</view>
		<u-modal @cancel="addHmd" @confirm="isShow=false" cancelText="仍然注销" confirmText="暂不注销" confirmColor="#F39B19"
			:show="isShow" :title="'注销账户确认'" showCancelButton>
			<view class="slot-content">
				<text style="font-size: 30rpx;padding-bottom: 0;">注销将删除您在找零工账户下的所有信息并且无法找回，请确认是否注销</text>
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isShow: false,
				isShow2: false,
				radiovalue7: '',
				reason: '',
				radiolist7: [{
					name: '暂时不需找工作',
					disabled: false
				}, {
					name: '需要解绑手机',
					disabled: false
				}, {
					name: '多余的账户',
					disabled: false
				}, {
					name: '其他原因',
					disabled: false
				}, ],
			}
		},
		onLoad(options) {},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
		methods: {
			handleClick() {
				if (this.radiovalue7 == '') {
					uni.showToast({
						title: '请选择注销原因',
						icon: 'none'
					})
					return
				}
				this.isShow = true
				// console.log(this.radiovalue7)
			},
			handleClick2() {
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 600)
			},
			async addHmd() {
				this.isShow = false
				let res = await this.$fetch(this.$api.logOutUser, uni.getStorageSync('token'), 'POST')
				if (res.code == 0) {
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('token');
					uni.removeStorageSync('userType');
					uni.removeStorageSync('userId');
					uni.removeStorageSync('level');
					uni.removeStorageSync('first-is');
					uni.removeStorageSync('isHavePayPassword');
					uni.showToast({
						title: '账户已注销',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 2000)
				} else {
					uni.showLoading({
						title: '请稍后...'
					})
					setTimeout(() => {
						uni.hideLoading()
						this.isShow2 = true
					}, 800)
				}
			},
			handleSelect() {
				this.isSelect = !this.isSelect
				if (this.isSelect) {
					this.isSelect2 = false
				}
			},
			next() {
				if (this.isSelect) {} else {
					this.isSelect2 = true
				}
			},
			handleOpenArticle() {
				uni.navigateTo({
					url: '/pages/user-agreement/service-agreement'
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	.container {
		width: 100%;

		.first {
			background: #fff;
			margin-top: 20rpx;

			.first-1 {
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				font-size: 32rpx;
				font-weight: 600;
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid #e4e7ed;
			}

			.u-page__radio-item {
				width: 90%;
				margin: 0 auto;
				height: 350rpx;
				padding-top: 30rpx;
				// border: 1px solid;
			}
		}

		.top1 {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			// border: 1px solid;
			image {
				width: 95%;
				height: 400rpx;
			}
		}

		.top2 {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -20rpx;

			// border: 1px solid;
			image {
				width: 95%;
				height: 260rpx;
			}
		}

		.btn {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 60rpx;

			image {
				width: 92%;
				height: 90rpx;
			}
		}

		.btn2 {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			/* border: 1px solid; */
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			height: 150rpx;
			padding-top: 20rpx;

			image {
				width: 92%;
				height: 90rpx;
			}
		}

		.slot-content {
			line-height: 50rpx;
			color: #666;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			text {
				padding-bottom: 20rpx;
			}
		}
	}
</style>